<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.component-fade-enter-active, .component-fade-leave-active {
		  transition: opacity .3s ease;
		}
		.component-fade-enter, .component-fade-leave-active {
		  opacity: 0;
		}

	</style>
</head>
<body>
	<div id="app">
		
	
		<transition name="component-fade" mode="out-in">
		  <component v-bind:is="view"></component>
		</transition>
	</div>
</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	    view: 'v-b'
	  },
	  components: {
	    'v-a': {
	      template: '<div>Component A</div>'
	    },
	    'v-b': {
	      template: '<div>Component B</div>'
	    }
	  }
	})


</script>
</html>